<template>
  <panel title="最近7天供配电服务异常统计">
    <div class="ml20 mr20">
      <x-row v-if="show">
        <x-col :span="24">
          <Bar :width="chartWidth" :height="chartHeight" :options="trendOptions"></Bar>
        </x-col>
      </x-row>
    </div>
  </panel>
</template>

<script>
import PRODUCT_IDS from 'config/product-ids'
import DEVICE_TYPES from 'config/device-types'
import formatDate from 'filters/format-date'
import { patchLostDates } from 'utils'
import api from 'api'

let phaseProductId = PRODUCT_IDS[DEVICE_TYPES.PHASE]
let ruleTag = '严重'
let endTime = new Date()
let startTime = new Date(endTime - 6 * 24 * 3600 * 1000)
let beginDay = formatDate(startTime, 'yyyy-MM-dd', true)
let beginHour = 0
let endDay = formatDate(endTime, 'yyyy-MM-dd', true)
let endHour = 24

export default {
  name: 'StallStatistic',

  data () {
    return {
      chartWidth: '100px',
      chartHeight: '100px',
      trend: {
        xAxis: [],
        series: []
      },
      show: false,
      legendData: []
    }
  },

  computed: {
    // 趋势图表配置
    trendOptions () {
      return {
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          containLabel: true,
          left: '3%',
          right: '10%',
          bottom: '10%',
          top: '10%'
        },
        legend: {
          data: this.legendData,
          align: 'left',
          right: 0,
          top: 0,
          orient: 'horizontal',
          textStyle: {
            color: '#fff'
          }
        },
        xAxis: [{
          type: 'category',
          boundaryGap: false,
          data: this.trend.xAxis
        }],
        yAxis: [{
          type: 'value',
          minInterval: 1
        }],
        series: this.trend.series
      }
    }
  },

  mounted () {
    this.requestRestfulData()
    setTimeout(this.initialize, 400)
  },

  methods: {
    initialize () {
      this.chartWidth = `${(this.$el.clientWidth - 40)}px`
      this.chartHeight = `${this.$el.clientHeight - 31}px`
      this.show = true
    },

    /**
     * 获取告警趋势图表数据
     */
    requestRestfulData () {
      let xAxis = []
      this.trend.series = []
      this.legendData = []

      let rules = [
        {
          id: '280fa6b1994c4a00',
          name: '总功率因数异常告警'
        },
        {
          id: '280fa6b1a1353200',
          name: '总有功功率异常报警'
        }
      ]
      rules.forEach((rule) => {
        api.statistics.getTagRuleTrend(phaseProductId, ruleTag, rule.id, beginDay, endDay, beginHour, endHour).then((res) => {
          if (res.status !== 200) {
            return
          }
          let data = res.data.map((item) => {
            // 算出某天告警总数
            let sum = _.sum(_.map(item.hours, 'message'))
            return {
              day: item.day,
              value: sum
            }
          })
          data = patchLostDates(data, beginDay, endDay, ['value'])
          if (!xAxis.length) {
            xAxis = _.map(data, 'day')
          }
          this.trend.series.push({
            name: rule.name,
            type: 'line',
            stack: rule.name,
            data: _.map(data, 'value')
          })
          this.legendData.push({
            name: rule.name,
            icon: 'circle'
          })
          this.trend.xAxis = xAxis
        }).catch((res) => {
          this.handleError(res)
        })
      })
    }
  }
}
</script>
